<template>
  <transition name="fade">
    <div :class="classes"
         @click.stop="check"

         :style="wraperStyles">
      <span :class="`${$options.name}-dot-inner`" v-if="!!type && type === 'dot'" :style="bgColorStyle"></span>
      <span v-if="!$slots.default" :class="textClasses" :style="textColorStyle" v-text="text"></span>
      <span v-else :class="textClasses" :style="textColorStyle">
        <slot></slot>
      </span>
      <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty"
            @click.native.stop="close" />
    </div>
  </transition>
</template>
<script type="text/ecmascript-6" src="./index.js"></script>
